<template>
  <div class="main-container">
    <div class="menu-container">
      <div class="nav-logo">
        <img src="@/assets/logo.png" class="logo-img">
        <span class="logo-text">ELOG</span>
      </div>
      <div class="nav-menu">
        <a-menu v-model="current" mode="horizontal">
          <a-menu-item key="1">
            <router-link to="/">
              <a-icon type="home" />首页
            </router-link>
          </a-menu-item>
          <a-menu-item key="2">
            <router-link to="/type">
              <a-icon type="appstore" />分类
            </router-link>
          </a-menu-item>
          <a-menu-item key="3">
            <router-link to="/timeline">
              <a-icon type="line-chart" />时间轴
            </router-link>
          </a-menu-item>
          <a-menu-item key="4">
            <router-link to="/about">
              <a-icon type="info-circle" />关于ELOG
            </router-link>
          </a-menu-item>
        </a-menu>
        <a-input-search
          v-model.trim="blogTitle"
          placeholder="你就可劲儿搜吧"
          style="width: 200px;margin-right: 10px"
          @search="onSearch"
        />
        <router-link v-if="!user.username" to="/login" class="login">登录/注册</router-link>
        <router-link v-else to="/manager" class="user-avatar" @click.native="handlerAvatarClick">
          <img v-if="user.header" :src="user.header" class="avatar">
          <img v-else src="@/assets/def-avatar.jpg" class="avatar">
        </router-link>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      current: ['1'],
      blogTitle: ''
    }
  },
  computed: {
    user() {
      return this.$store.getters.getUser
    }
  },
  methods: {
    handlerAvatarClick() {
      this.current = []
    },
    onSearch() {
      this.$router.push('/search/' + this.blogTitle)
    }
  }
}
</script>
<style scoped>
.main-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  background-color: #fff;
  margin-bottom: 10px !important;
}
.menu-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  line-height: 70px;
  width: 1200px !important;
}
.nav-logo {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.logo-img {
  height: 40px;
  width: 40px;
  margin-right: 10px;
}
.logo-text {
  white-space: nowrap;
  font-size: 18px !important;
  font-weight: bolder;
  font-style: italic;
}
.nav-menu {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-right: 40px;
}
.ant-menu {
  font-size: 16px !important;
}
.ant-menu-horizontal {
  border-bottom: none !important;
}
.login {
  flex-wrap: nowrap;
  white-space: nowrap;
  color: #4d4d4d;
}
.login:hover {
  color: #878d99;
}
.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #e5e5e5;
}
</style>
